<template>
	<view class="pages">
		<com-head textTit="提交订单" :typeVal="1" :scrollTop="scrollTop"></com-head>
		
		<view class="card-box">
			<view 
			class="card-zi " 
			:class="{'border-bot':isDelivery}"
			@click="show=true">
				<text>请选择收货方式</text>
				<text class="active-inp">
					{{isDelivery?'门店自提':'物流配送'}}
					<text class="iconfont icon-a-arrowbeifen3"></text>
				</text>
			</view>
			<view v-if="isDelivery" class="card-zi pls"  @click="utlis.goUrl('/pages/mine/selectStores?type=2')">
				<text>选择自提门店</text>
				<text class="active-inp" v-if="toStore.title">
					{{toStore.title}}
					<text class="iconfont icon-a-arrowbeifen3"></text>
				</text>
				<text class="active-inp" v-else>
					{{defaultAddress.title}}
					<text class="iconfont icon-a-arrowbeifen3"></text>
				</text>
			</view>
			<view v-if="isDelivery" class="card-zi" @click="showTime = true">
				<text>选择自提时间</text>
				<text class="active-inp">
					{{times}}
					<text class="iconfont icon-a-arrowbeifen3"></text>
				</text>
			</view>
		</view>
		
		<!-- <view class="card-box" v-show="!isDelivery">
			<view class="card-zi" >
				<text class="input-name">收货人</text>
				<input type="text" placeholder="请输入收货人姓名" v-model="form.realname" placeholder-style="color:#999"/>
			</view>
			<view class="card-zi" >
				<text class="input-name">手机号码</text>
				<input type="text" placeholder="请输入收货人手机号码" v-model="form.phone" placeholder-style="color:#999"/>
			</view>
			<view class="card-zi active-inp" @click="showAddress=true">
				<text class="input-name">所在城市</text>
				<text class="hui u-flex-1" v-if="!site">
					请选择城市
				</text>
				<text class=" u-flex-1" v-else>
					{{site}}
				</text>
				<text class="iconfont icon-a-arrowbeifen3"></text>
			</view>
			<view class="card-zi" >
				<text class="input-name">详细地址</text>
				<input type="text" placeholder="请输入详细的收货地址" v-model="form.address" placeholder-style="color:#999"/>
			</view>
		</view> -->
		
		<view class="takeMain"  v-show="!isDelivery">
			<view class="takeMain-view">
				<view class="takeMain-view-main" @click="jump('/pages/mine/take/index')">
					<view class="site"><text>收货人：{{receiverList.realname}}</text><text>{{receiverList.phone}}</text></view>
					<view class="title">
					<span v-for="row in receiverList.area">{{row.area_name}}</span>{{receiverList.address}}</view>
				</view>
			</view>
		</view>
		
		
		<view class="goods-box">
			<view class="goods" v-for="(item,index) in goodsInfo.goods" :key="item">
				<image :src="item.img" mode="aspectFill"></image>
				<view>
					<view class="t1">
						{{item.goods.title}}
					</view>
					<view class="t2">
						<view>{{item.sku_text}}</view>
					</view>
					<view class="price">
						<text class="make"><text>¥</text>{{item.sale_price}}</text>
						<text>× {{item.number}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="card-box" >
			<view class="card-zi" v-if="userInfo.vip_id >= 1">
				<text>会员卡</text>
				<text class="price">会员卡可用</text>
			</view>
			<view class="card-zi">
				<text>优惠券</text>
				<text class="price" v-if="couponList.length && !couponInfo" @click="showCoupon = true">{{couponList.length}}张可用</text>
				<view class="price" v-if="couponList.length && couponInfo"  @click="showCoupon = true">
					<text class="price" v-if="couponInfo.couponPool.off_type == 0">
						减{{Number(couponInfo.couponPool.face_value).toFixed(2)}}
					</text>
					<text class="price" v-if="couponInfo.couponPool.off_type == 1">
						{{couponInfo.couponPool.discount}}折，最大折扣{{Number(couponInfo.couponPool.max_discount).toFixed(2)}}
					</text>
				</view>
				<text class="price" v-if="!couponList.length">没有可用优惠券</text>
			</view>
		</view>
		<view class="card-box">
			<view class="card-zi" >
				<text>商品总价</text>
				<text class="prices"><text>¥</text>{{goodsInfo.sale_price}}</text>
			</view>
			
			<!-- <view class="card-zi" v-if="userInfo.integral >= 1000"> -->
				<!-- <text>积分抵扣</text> -->
				<!-- <u-radio-group v-model="isUserIntegral" @change="changeRadio()">
					<u-radio 
					    active-color="#E8C778"
						v-for="(item, index) in radioList" :key="index" 
						:name="item.name"
						:disabled="item.disabled"
					>
						{{item.name}}
					</u-radio>
				</u-radio-group> -->
			<!-- </view> -->
			
			<!-- <view class="card-zi" v-if="isUserIntegral == '是'">
				<text>积分抵扣</text>
				<view class="right">
					<input @input="inputChange($event)" type="number" v-model="inputpoints"  placeholder="请输入" placeholder-style="color:#999;font-size:24rpx"/>
					<text class="price">¥{{Number(integralAmount).toFixed(2)}}</text>
				</view>
			</view> -->
			
			<view class="card-zi" v-if="goodsInfo.integral_price > 0">
				<text>积分扣除</text>
				<view class="right">
					{{goodsInfo.integral_price}}
				</view>
			</view>
			
			<view class="card-zi border-bot" v-if="goodsInfo.disparity_price > 0">
				<text>优惠金额</text>
				<text>¥{{goodsInfo.disparity_price}}</text>
			</view>
			<view class="card-zi border-bot" v-if="goodsInfo.vip_discount > 0">
				<text>会员折扣</text>
				<text>¥{{goodsInfo.vip_discount}}</text>
			</view>
			<view class="card-zi " v-if="goodsInfo.freight">
				<text>运费</text>
				<text class="price">¥{{goodsInfo.freight}}</text>
			</view>
		</view>
		
		
		<!-- 支付方式 -->
		<view class="groupList">
			<view class="item">
				<text>支付方式</text>
			</view>
			<view class="items">
				<view class="select" v-for="(item,i) in pay" :key="item" @click="payIndex=i">
					<image :src="item.img" mode="aspectFill"></image>
					<view>{{item.title}}</view>
					<view :class="payIndex==i?'icon-a-xingzhuang1':'icon-weixuanzhong'" class="iconfont left-auto"></view>
				</view>
				<!-- <view>
					<image class="image" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/wx.png"></image>
					微信支付
					<image class="imgs" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/good2.png"></image>
				</view> -->
			</view>
		</view>
		
		
		<u-popup v-model="show1" safe-area-inset-bottom border-radius="34" closeable mode="bottom">
			
		</u-popup>
		
		
		<!-- 选择可用优惠券 -->
		<u-popup v-model="showCoupon" safe-area-inset-bottom border-radius="34" closeable mode="bottom">
			<view class="chioseTitle">选择优惠券</view>
			<scroll-view scroll-y="true" style="max-height: 600rpx;">
				<view class="couponList" v-if="couponList.length">
					<view class="list" v-for="(ele,index) in couponList" :key="index">
						<image src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/09/10/2x-2.png" mode=""></image>
						<view class="couponContent">
							<view class="left">
								<view class="couponL" v-if="ele.couponPool.off_type == 0">
									<view class="price">￥<text>{{Number(ele.couponPool.face_value).toFixed(2)}}</text></view>
									<view class="fullReduction">满{{Number(ele.couponPool.min_value).toFixed(2)}}元可用</view>
								</view>
								<view class="couponL" v-else>
									<view class="price"><text>{{ele.couponPool.discount}}</text>折</view>
									<view class="fullReduction">最大折扣{{Number(ele.couponPool.max_discount).toFixed(2)}}</view>
								</view>
								<view class="couponM">
									<view class="t1">{{ele.couponPool.title}}({{getStausText(ele.couponPool.coupon_scope_use_id)}})</view>
									<view class="t2">有效期：{{$u.timeFormat(ele.couponPool.start_time, 'yyyy-mm-dd')}}至{{$u.timeFormat(ele.couponPool.end_time,'yyyy-mm-dd')}}</view>
								</view>
							</view>
							<view class="couponR">
								<view @click="chioseCoupon(ele,index)" class="iconfont icon" :class="ele.isCheck ? 'icon-a-xingzhuang1' : 'icon-weixuanzhong' "></view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- <view class="useBtn">
				确定
			</view> -->
		</u-popup>
		<view class="bottom-buy">
			<view class="total-price">
				总计金额：
				<text>
					<text class="pl">¥</text>{{goodsInfo.pay_price || 0}}
					<text v-if="goodsInfo.freight > 0">（含运费¥{{goodsInfo.freight}}）</text>
				</text>
			</view>
			<view class="btn-ho left-auto" @click="submit()">确认支付</view>
		</view>
		<!-- 收货方式 -->
		<u-select v-model="show" confirm-color="hsla(42, 48%, 65%, 1)" @confirm="confirm" :list="receiving"></u-select>
		<!-- 选择自提时间 -->
		<u-picker :startYear="year" :startMonths="month" :startDay="day"
		mode="time" confirm-color="#007664" v-model="showTime" :params="params" :default-time="defaultTime" @confirm="confirmTime"></u-picker>
	    <u-select v-model="showAddress" label-name="area_name" 
		value-name="id" child-name="child" :default-value="defaultList" 
		confirm-color="hsla(42, 48%, 65%, 1)"
		mode="mutil-column-auto" :list="list" @confirm="confirmAddress"></u-select>
		<!-- <u-picker mode="region" v-model="showAddress" @confirm="confirmAddress"></u-picker> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				year:"",
				month:'',
				day:'',
				inputpoints:1000,
				isUserIntegral:"否",
				couponInfo:"",//优惠券信息
				showCoupon:false,
				integralAmount:0,
				list:[],
				radioList: [
					{
						name: '否',
						disabled: false
					},
					{
						name: '是',
						disabled: false
					},
				],
				value: 'orange',
				coupon:'',//优惠券价格
				form:{
					area_ids:'',
					skus:'',
					coupon_id:'',
					address_type:2,
					store_id:'',
					is_cart:'',
					
					staff_id: '',
					staff_sub_id: '',
					
					address_time:'',
					realname:'',
					phone:'',
					address:'',
					pay_type:'',
					integral:''
				},
				site:'',
				freights:0,//获取运费
				defaultList:[0,0,0],
				showAddress:false,
				times:'',
				defaultTime:'',
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				showTime:false,
				num:1,
				show:false,
				show1:false,
				payIndex:0,
				isDelivery:true,
				couponList:[],//优惠券列表
				couponPrice:0,
				oldPrice:0,//实际支付金额
				vipPrice:0,//会员金额
				isSubmit:false,
				receiving:[{
					value: '1',
					label: '门店自提'
				},{
					value: '2',
					label: '物流配送'
				}],
				pay:[{
					img:'//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/member.png',
					title:'会员卡支付（门店）',
					id: 1,
				},
				{
					img:'//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/member.png',
					title:'会员卡支付（平台）',
					id: 4,
				},
				{
					img:'//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/wx.png',
					title:'微信支付',
					id: 2,
				}],
				receiverList: {},
				scrollTop: 0,
				skusObj: []
			};
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		onReady() {
			var date = new Date;
			this.defaultTime =this.time(date)
		},
		onLoad({is_cart, skus, hiddCar}) {
			if(hiddCar === "1"){
				this.isDelivery = false
				this.receiving = [{
					value: '2',
					label: '物流配送'
				}];
				this.pay = [
				{
					img:'//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/wx.png',
					title:'微信支付',
					id: 2,
				}]
			}
			uni.showLoading({
				title: '加载中'
			});
			console.log(this.share_user_id,this.share_goods_id,111111111111111)
			this.form.is_cart = is_cart
			this.treeAddress()
			// :startYear="startYearV(0)"
			// :startMonths="startYearV(1)"
			// :startDay="startYearV(2)"
			
			// 回显数据
			let pl = decodeURIComponent(skus)
			console.log(54, JSON.parse(pl))
			this.skusObj = JSON.parse(pl)
			this.confirmOrder(JSON.parse(pl))
			
			// 获取当前日期
			let date = new Date()
			this.year = date.getFullYear()
			this.month = date.getMonth() + 1
			this.day = date.getDate()
			
		},
		onShow() {
			this.receiverListFun()
		},
		mounted(){
			let sku = []
			let vipPrice = 0
			console.log(this.goodsInfo,"this.goodsInfo")
			// if(this.userInfo.vip_id >= 1){
			// 	this.oldPrice = this.goodsInfo.vip_price
			// }else{
				
			// }
		},
		computed:{
			// salsePrice(){
			// 	let price = Number.parseFloat(this.oldPrice||0) + Number.parseFloat(this.freights||0) - Number.parseFloat(this.coupon||0) - Number.parseFloat(this.integralAmount||0);
			// 	console.log(price,'price');
			// 	return price.toFixed(2);
			// },
		},
		methods:{
			async confirmOrder(sku) {
				// address_type 1:物流 2:自提
				this.$u.vuex('goodsInfo', "")
				let {code,data} = await this.$u.api.confirmOrder({skus:sku, coupon_id: this.form.coupon_id});
				uni.hideLoading();
				if(code){
					this.$u.vuex('goodsInfo', data)
					this.goodsInfo.goods.forEach((ele)=>{
						let obj = {
							sku_id:ele.id,
							number:ele.number
						}
						sku.push(obj)
					})
					this.form.skus = JSON.stringify(sku)
					this.oldPrice = this.goodsInfo.sale_price
					
					this.getCouponList()
				}
			},
			async receiverListFun() {
				let {data,code} = await this.$u.api.getAddress();
				if(code){
					data.map(item => {
						if (item.is_default == 1) this.receiverList = item
					})
				}
			},
			changeRadio(e){
				if(e == "否"){
					let price;
					this.inputpoints = ""
					this.integralAmount = 0
				}else{
					this.inputpoints = 1000
					this.integralAmount = this.inputpoints / 1000
				}
			},
			inputChange(e){
				setTimeout(()=>{
					let num = e.detail.value*1
					if(num > this.userInfo.integral){
						this.$u.toast(`最多可抵扣${this.userInfo.integral}分`)
						this.inputpoints = this.userInfo.integral
						this.integralAmount = this.userInfo.integral / 1000;
						return
					}
					if(num < 1000){
						this.$u.toast("输入的积分不能小于1000")
						this.inputpoints = 1000
						this.integralAmount = 1
					}else{
						this.integralAmount = num / 1000
					}
				},0)
			},
			// 选择要使用的优惠券
			chioseCoupon(ele,index){
				this.couponList.forEach((ele,index1)=>{
					if(index != index1){
						ele.isCheck = false
					}else{
						ele.isCheck = !ele.isCheck
					}
				})
				if(ele.isCheck){
					// this.couponInfo = ele;
					this.form.coupon_id = ele.id;
		//             let coupon = 0;
		//             if (ele.couponPool.off_type == 1) {//是否是折扣
		//                 //折扣金额 = 商品总价 - (商品总价*折扣)
		//                 coupon = this.salsePrice*1 - (this.salsePrice * (ele.couponPool.discount / 10)).toFixed(2);
		//                 console.log('优惠金额', coupon);
		//                 //折扣金额>最大折扣金额 则 折扣金额=最大折扣金额
		//                 coupon > ele.couponPool.max_discount ? coupon = ele.couponPool.max_discount : '';
		//             } else {
		//                 coupon = ele.couponPool.face_value;
		//             }
		// 			console.log(coupon,'couponcoupon');
		//             this.coupon = Number.parseFloat(coupon).toFixed(2);
				}else{
	//                 this.coupon = "";
	// 				this.couponInfo = ""
	                this.form.coupon_id = '';
				}
				this.showCoupon = false
				this.confirmOrder(this.skusObj)
			},
			getStausText(val){
				switch(val){
					case 0 :
					return '通用券'
					case 1 :
					return '商品券'
					case 2 :
					return '项目券'
				}
			},
			// 获取优惠券列表
			async getCouponList(){
				let ids = this.goodsInfo.goods.map(item => item.id).join(',')
				let {code,data} = await this.$u.api.getCoupon({store_id:this.store_id,coupon_scope_use_id:1, relation_id: ids});
				if(code){
					let arr = []
					data.forEach((ele)=>{
						ele.isCheck = false
						console.log(ele.couponPool.off_type,"ele.couponPool.off_type")
						if(ele.couponPool.off_type == 0){
							console.log("0000", this.oldPrice, +ele.couponPool.min_value)
							let price = Number(this.oldPrice)
							if(price >= +ele.couponPool.min_value){
								arr.push(ele)
							}
							console.log("222222222222")
						}else{
							
							arr.push(ele)
							console.log(arr,"arrarr")
						}
					})
					this.couponList = arr
					console.log(this.couponList,"this.couponList")
				}
			},
			async submit(){
				if(this.form.address_type == 2){
					this.form.store_id = this.toStore_id ? this.toStore_id : this.store_id
				}else{
					this.form.store_id = this.store_id
				}
				if(this.form.address_type == 2){
					if(!this.form.address_time){
						this.$u.toast("请选择自提时间")
						return
					}
				}else{
					// if(!this.form.realname){
					// 	this.$u.toast("请输入收货人姓名")
					// 	return
					// }
					// if(!this.form.phone){
					// 	this.$u.toast("请输入手机号码")
					// 	return
					// }else{
					// 	let reg = /^1(3|4|5|6|7|8|9)\d{9}$/;
					// 	if (!reg.test(this.form.phone)) {
					// 		this.$u.toast('手机号格式不正确')
					// 		return false
					// 	}
					// }
					// if(!this.form.address){
					// 	this.$u.toast("请输入详细地址")
					// 	return
					// }
					// if(!this.form.area_ids){
					// 	this.$u.toast("请选择所在城市")
					// 	return
					// }
				}
				
				// this.form.pay_type = this.pay[this.payIndex].id this.payIndex == 0 ? 1 : this.payIndex == 1 ? 2 : 3
				this.form.pay_type = this.pay[this.payIndex].id
				
				this.form.realname = this.receiverList.realname
				this.form.phone = this.receiverList.phone
				this.form.address = this.receiverList.address
				this.form.area_ids = this.receiverList.area_ids
				
				if (this.fid) this.form.staff_id = this.fid
				if (this.cid) this.form.staff_sub_id = this.cid
				
				if(this.couponInfo){
					this.form.coupon_id = this.couponInfo.id
				}
				if(this.isUserIntegral == "是"){
					this.form.integral = this.inputpoints
				}
				// console.log(11111111111)
				if(this.isSubmit)return
				this.isSubmit = true
				// console.log(2222222222)
				console.log(this.form,"this.form")
				let {code,data} = await this.$u.api.createOrders(this.form);
				this.isSubmit =  false
				if(code){
					this.$u.vuex("toStore","")
					this.$u.vuex("toStore_id","")
					if(this.share_goods_id){
						if(this.share_goods_id == this.goodsInfo.goods_id){
							this.$u.vuex("share_user_id","")
						}
					}
					// console.log(this.share_user_id,this.share_goods_id,3333333333333333333333)
					this.wxPay(data.out_trade_no)
				}
			},
			async wxPay(orderId) {
				if(this.isSubmit)return
				this.isSubmit = true
				uni.login({
					success: async (loginRes) => {
						let {code,data} = await this.$u.api.hfPay({
							out_trade_no: orderId, 
							pay_type: this.pay[this.payIndex].id,
							code: loginRes.code
						});
						this.isSubmit = false
						if(code){
							var pls = data
							let that = this
							
							if(this.payIndex != 2) {
								that.toast("支付成功")
								setTimeout(() => {
									uni.reLaunch({
										url:`../mine/submitSuccess?type=4&order_id=${data}&types=${that.form.address_type}`
									})
								}, 500)
								return 
							}
							
							uni.requestPayment({
								provider: "wxpay",
								appid: pls.appId,
								timeStamp: pls.timeStamp,
								nonceStr: pls.nonceStr,
								package: pls.package,
								signType: pls.signType,
								paySign: pls.paySign,
								success(res) {
									if (res.errMsg == "requestPayment:ok") {
										that.toast("支付成功")
										setTimeout(() => {
											uni.reLaunch({
												url:`../mine/submitSuccess?type=4&order_id=${data.order_id}&types=${that.form.address_type}`
											})
										}, 500)
									}
								},
								fail(e) {
									if (e.errMsg == "requestPayment:fail cancel") {
										that.toast("支付已取消")
									} else {
										that.toast("支付失败" + e.errMsg)
									}
								},
							});
						}
					}
				})
				
			},
			confirmTime(e){
				this.times= e.year +'/'+ e.month +'/'+ e.day +' '+ e.hour +':'+ e.minute+":00"
				var date = new Date(this.times)
				console.log(e,"eeeeeeeee")
				let address_time = String(date.getTime() / 1000)
				this.form.address_time = address_time
				console.log(this.form.address_time,"this.form.address_time")
			},
			async treeAddress(){
				let {code,data} = await this.$u.api.tree();
				if(code){
					this.list = data;
					console.log(this.list,"this.listthis.list")
				}
			},
			async confirmAddress(e) {
				this.site = `${e[0].label}-${e[1].label}-${e[2].label}`;
				this.form.area_ids = `${e[0].value},${e[1].value},${e[2].value}`;
				let index1 = 0
				let index2 = 0
				let index3 = 0
				this.list.forEach((ele1,num1)=>{
					if(ele1.area_name == e[0].label){
						index1 = num1
						ele1.child.forEach((ele2,num2)=>{
							if(ele2.area_name == e[1].label){
								index2 = num2
								ele2.child.forEach((ele3,num3)=>{
									if(ele3.area_name == e[2].label){
										index3 = num3
									}
								})
							}
						})
					}
				})
				console.log(index1,index2,index3,"111111111111")
				this.defaultList = [index1,index2,index3];
				await this.getFreight(e[0].value)
				console.log(e[0].value,e[1].value,e[2].value,"area_ids")
			},
			// 获取运费
			async getFreight(id){
				let {code,data} = await this.$u.api.getFreight({area_country_id:id});
				if(code){
					if(data != null){
						this.freights = data * 1;
					}else{
						this.freights = "0.00";
					}
				}
			},
			time(date) {
				var y = date.getFullYear()
				var m = date.getMonth() + 1
				m = m < 10 ? '0' + m : m
				var d = date.getDate()
				d = d < 10 ? '0' + d : d
				var h = date.getHours()
				h = h < 10 ? '0' + h : h
				var minute = date.getMinutes()
				minute = minute < 10 ? '0' + minute : minute
				var second = date.getSeconds()
				second = second < 10 ? '0' + second : second
				return y + '-' + m + '-' + d + ' ' + h + ':' + minute
			},
			confirm(e){
				this.isDelivery = e[0].value == 1;
				console.log(this.isDelivery,"this.isDeliverythis.isDelivery")
				if(this.isDelivery){
					// 切换到门店自提
					this.defaultList = []
					this.site =""
					this.form.area_ids=""
					this.form.phone=''
					this.form.realname=''
					this.form.address=''
					this.form.address_type = 2
					this.$u.vuex("toStore","")
					this.$u.vuex("toStore_id","")
					this.freights = 0
					// this.freights=""
				}else{
					this.form.address_time = ""
					this.form.address_type = 1
				}
			}
		}
	}
</script>

<style>
	page{
		background-color: #F6F7FA;
	}
</style>
<style lang="scss" scoped>
.pages{
	.icon-a-xingzhuang1{
		color: #007664 !important;
	}
	padding: 50rpx 32rpx 150rpx 32rpx;
	.couponList{
		.list{
			width: 686rpx;
			height: 161rpx;
			position: relative;
			margin-bottom: 30rpx;
			image{
				width: 686rpx;
				height: 161rpx;
				position: absolute;
				top: 0;
			}
			.couponContent{
				width: 686rpx;
				height: 161rpx;
				position: absolute;
				top: 0;
				z-index: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 26rpx 34rpx 31rpx  50rpx;
				.left{
					display: flex;
					.couponL{
						color: #007664;
						margin-right: 52rpx;
						.price{
							font-size: 22rpx;
							line-height: 74rpx;
							text{
								font-size: 53rpx;
							}
						}
						.fullReduction{
							font-size: 22rpx;
						}
					}
					.couponM{
						.t1{
							color: #333333;
							font-size: 24rpx;
							margin-bottom: 14rpx;
							line-height: 33rpx;
							margin-top: 20rpx;
						}
						.t2{
							color: #666666;
							font-size: 17rpx;
						}
					}
				}
				.couponR{
					width: 104rpx;
					border-left: 2rpx dashed rgba(0,118,100,0.7);
					height: 137rpx;
					position: relative;
					.icon{
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
						color: #979797;
						font-size: 40rpx;
					}
				}
			}
		}
	}
	
	.groupList{
		width: 100%;
		padding: 0 32rpx;
		background-color: #FFFFFF;
		border-radius: 15rpx;
		margin: 0rpx 0 34rpx 0;
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 96rpx;
			color: #333333;
			font-size: 26rpx;
			border-bottom: 1rpx solid rgba(142,142,142,.24);
			position: relative;
			.image{
				width: 33rpx;
				height: 33rpx;
				display: inline-block;
				position: relative;
				top: 5rpx;
				margin-right: 19rpx;
			}
			.imgs{
				width: 33rpx;
				height: 33rpx;
				display: inline-block;
				position: absolute;
				right: 0;
			}
			.right{
				font-size: 24rpx;
				display: flex;
				align-items: center;
				text{
					margin-right: 32rpx;
				}
			}
		}
		.items{
			// padding: 40rpx 43rpx;
			// padding-top: 28rpx;
			.title{
				font-size: 26rpx;
				font-weight: 400;
				color: #999999;
				line-height: 37rpx;
				margin-bottom: 38rpx;
			}
			.select{
				display: flex;
				align-items:center;
				// margin-bottom: 36rpx;
				font-size: 28rpx;
				font-weight: 400;
				text-align: left;
				color: #333333;
				line-height: 40rpx;
				border-bottom: 1rpx solid rgba(142,142,142,.24);
				padding: 28rpx 0;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 12rpx;
				}
				.iconfont{
					padding: 10rpx 20rpx;
				}
				.icon-a-xingzhuang1{
					color: rgba(209,184,125,1);
				}
				&:last-child{
					border: none;
				}
			}
			.price-box{
				border-top: 1px solid #d8d8d8;
				padding-top: 50rpx;
				display: flex;
				align-items: center;
				font-size: 30rpx;
				font-weight: 400;
				text-align: left;
				color: #666666;
				line-height: 42rpx;
				>text{
					font-size: 30rpx;
					font-weight: 400;
					text-align: left;
					color: #007664;
					line-height: 42rpx;
					text{
						font-size: 20rpx;
						font-weight: 400;
						color: #666666;
						line-height: 42rpx;
					}
				}
				.btn{
					margin-left: auto;
					width: 236rpx;
					height: 70rpx;
					background: #007664;
					border-radius: 6rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #ffffff;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
		.item:last-child{
			border-bottom: 1rpx solid #F6F7FA;
		}
	}
	
	.goods-box{
		.goods{
			display: flex;
			margin-bottom: 20rpx;
			background: #ffffff;
			border-radius: 20rpx;
			padding: 24rpx;
			image{
				width: 150rpx;
				height: 150rpx;
				border-radius: 10rpx;
			}
			>view{
				flex: 1;
				padding: 0rpx 30rpx 0 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
			.t1{
				display: flex;
				font-size: 26rpx;
				font-weight: 400;
				text-align: left;
				color: #071529;
				line-height: 37rpx;
				text{
					font-size: 20rpx;
					font-weight: 400;
					text-align: right;
					color: #999999;
					line-height: 28rpx;
				}
			}
			.t2{
				font-size: 20rpx;
				color: hsla(215, 71%, 9%, 0.5);
				display: flex;
				view{
					display: flex;
					justify-content: center;
					align-items: center;
					background: hsla(0, 0%, 76%, 0.1);
					height: 35rpx;
					padding: 0 15rpx;
					border-radius: 17.5rpx;
					margin-right: 10rpx;
				}
			}
			.price{
				display: flex;
				align-items: center;
				
				justify-content: space-between;
				text{
					font-size: 28rpx;
					font-weight: 400;
					text-align: left;
					color: #999999;
					line-height: 40rpx;
				}
				.make{
					font-size: 32rpx;
					font-weight: 400;
					color: #007664;
					line-height: 42rpx;
					text{
						color: #007664;
						font-size: 24rpx;
						margin-right: 4rpx;
					}
				}
			}
		}
		
	}
	.chioseTitle{
		text-align: center;
		margin-top: 40rpx;
		color: #333333;
		font-size: 30rpx;
		margin-bottom: 30rpx;
	}
	
	.takeMain{
		margin-top: 10rpx;
		&-view{
			border-radius: 20rpx;
			padding: 32rpx 24rpx;
			background: white;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			&:last-child{
				border-bottom: none;
			}
			&-main{
				width: 100%;
				margin-left: 16rpx;
				.title{
					font-size: 24rpx;
					color: #666666;
					padding: 20rpx 0 0 0;
				}
				.site{
					display: flex;
					font-size: 28rpx;
					color: #333333;
					text{
						flex: 1;
						&:last-child{
							text-align: right;
						}
					}
				}
				.default{
					display: inline-block;
					width: 72rpx;
					height: 36rpx;
					background: #32C2B3;
					border-radius: 6rpx;
					color: white;
					line-height: 36rpx;
					text-align: center;
					margin-left: 16rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					position: relative;
					top: -3rpx;
				}
			}
		}
	}
	
	
	.useBtn{
		width: 670rpx;
		line-height: 100rpx;
		background: linear-gradient(140deg,#f2e4a2 0%, #d1b87d);
		border-radius: 8rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 32rpx;
		margin: 30rpx auto 40rpx;
	}
	.card-box{
		background: #ffffff;
		border-radius: 15rpx;
		padding: 0 32rpx;
		margin-bottom: 20rpx;
		.border-bot{
			border-bottom: 1px solid hsla(0, 0%, 56%, 0.24);
		}
		.pls{
			border: none;
		}
		.card-zi{
			height: 96rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid hsla(0, 0%, 56%, 0.24);
			&:last-child{
				border: none;
			}
			.right{
				display: flex;
				align-items: center;
				input{
					width: 100rpx;
					padding: 0 15rpx;
					line-height: 77rpx;
					border: 1rpx solid #c8c9cc;
					border-radius: 6rpx;
					margin-right: 20rpx;
					font-size: 24rpx;
				}
			}
			.input-name{
				width: 120rpx;
				margin-right: 30rpx;
			}
			text{
				font-size: 26rpx;
				font-weight: 400;
				text-align: left;
				color: #333333;
				line-height: 26rpx;
			}
			.active-inp{
				.iconfont{
					margin-left: 10rpx;
					font-size: 38rpx;
					color: #333333;
				}
			}
			.hui{
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
			}
			input{
				font-size: 26rpx;
				height: 100%;
				flex: 1;
			}
			.price{
				font-size: 30rpx;
				font-weight: 400;
				text-align: left;
				color: #007664;
				line-height: 42rpx;
			}
		}
	}
	
	.bottom-buy{
		z-index: 99;
		box-shadow: 0px 0px 13rpx 0px rgba(110,126,189,0.18); 
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		// @if env(safe-area-inset-bottom)!=0{
		// 	padding: 35rpx 35rpx env(safe-area-inset-bottom);
		// }@else{
			padding: 35rpx;
		// }
		display: flex;
		align-items: center;
		background-color: #fff;
		.total-price{
			font-size: 30rpx;
			text-align: left;
			color: #666666;
			line-height: 42rpx;
			>text{
				font-size: 40rpx;
				font-weight: 400;
				color: #007664;
				line-height: 42rpx;
				.pl{
					color: #007664;
					font-size: 30rpx;
					margin-right: 5rpx;
				}
				text{
					font-size: 20rpx;
					font-weight: 400;
					color: #666666;
					line-height: 42rpx;
				}
			}
		}
		.btn-bai{
			width: 174rpx;
			height: 70rpx;
			border: 1px solid #007664;
			border-radius: 6rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #007664;
			display: flex;
			justify-content: center;
			align-items: center;
			// text-align: center;
			// line-height: 70rpx;
		}
		.btn-ho{
			width: 200rpx;
			height: 80rpx;
			background: linear-gradient(135deg, #50DCC2 0%, #007664 );
			border-radius: 45rpx;
			font-size: 30rpx;
			font-weight: 400;
			color:#ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>
